import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}
class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
      </View>
    );
  }
}

/**
 * 创建一个堆栈导航器
 */
const createNavigator = createStackNavigator(
  {
    Home    : {
      screen : HomeScreen
    },
    Details : {
      screen : DetailsScreen
    }
  },
  {
    initialRouteName : 'Home'
  }
);

const Container = createAppContainer(createNavigator);

export default class AppContainer extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    console.log('AppContainer--componentDidMount');
  }
  componentWillUnmount() {
    console.log('AppContainer--componentWillUnmount');
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
        <Container
          ref={(nav) => (this.navigation = nav)}
          onNavigationStateChange={(prevState, currentState, action) => {
            console.log('onNavigationStateChange' + '---------', prevState, currentState, action);
          }}
        />
      </View>
    );
  }
}
